<template>
  <view class="cu-dialog">
    <view class="cu-bar justify-between">
      <view class="title">{{ title }}</view>
      <view class="text-blue flex align-center" @tap="onSearch">
        <view class="label">生成组号</view>
        <view class="arrow">
          <image mode="widthFix" src="../../static/card/arrow-blue.png" />
        </view>
      </view>
    </view>

    <view class="cu-content">
      <view class="number-row grid col-6">
        <view
          @click="numberChange(idx + 1)"
          class="number-item"
          :class="numbers.indexOf(idx + 1) > -1 ? 'active' : ''"
          v-for="(item, idx) in 11"
          :key="idx + 1"
        >
          {{ String(idx + 1).padStart(2, '0') }}
        </view>
        <view class="clean-item" @tap="onClean">
          清
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    title: {
      type: [String],
      default: '请选择号码',
    },
    defaultNumbers: {
      type: [Array],
      default: () => {
        return []
      },
    },
  },
  data() {
    return {
      numbers: this.defaultNumbers,
    }
  },
  created() {
    this.numbers = this.defaultNumbers.map(e => Number(e))
  },
  methods: {
    numberChange(number) {
      let index = this.numbers.indexOf(number)

      if (index > -1) {
        this.numbers.splice(index, 1)
      } else {
        this.numbers.push(number)
      }
    },
    onSearch() {
      this.$emit('search', this.numbers)
      this.$emit('close')
    },
    onClean() {
      this.numbers = []
      this.$emit('search', this.numbers)
    },
  },
}
</script>

<style lang="scss" scoped>
.cu-dialog {
  border-radius: 20upx;
  .cu-bar {
    padding: 30upx 0 30upx 24upx;
    background-color: #f9faff;
    line-height: 66upx;
  }
  .title {
    font-size: 36upx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    line-height: 50upx;
  }
  .label {
    font-size: 36upx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(20, 158, 255, 1);
  }
  .arrow {
    width: 70upx;
    height: 72upx;
  }
  .cu-content {
    background-color: #ffffff;
    height: 320upx;
    padding: 60upx 30upx;
  }

  .number-row {
    background-color: #ffffff;
    height: 200upx;
    width: 100%;
    .number-item {
      width: 80upx;
      height: 80upx;
      display: inline-block;
      margin-right: 28upx;
      line-height: 80upx;
      border-radius: 40upx;
      background-color: #edf2f6;
      color: #71808a;
      text-align: center;
      font-size: 36upx;
      &:nth-child(6n + 6) {
        margin-right: 0;
      }
      &.active {
        background-color: #da2626;
        color: #ffffff;
      }
    }
    .clean-item {
      width: 80upx;
      height: 80upx;
      display: inline-block;
      line-height: 80upx;
      border-radius: 20upx;
      background: rgba(20, 158, 255, 1);
      color: #ffffff;
      text-align: center;
      font-size: 36upx;
    }
  }
}
</style>
